<template>
  <div>
     <h1>vuex版的计数器</h1>
     <!-- 访问模块中状态的语法:$store.state.模块名.状态变量 -->
     <h2>state:{{$store.state.counterKey.num}}</h2>
     <!-- 访问模块中getters的语法:$store.getters['模块名/getters的名称'] -->
     <h2>getters:{{$store.getters['counterKey/doubleNum']}}</h2>
     <button @click="add">同步+</button>
     <button @click="addAsync">异步+</button>
  </div>
</template>

<script>
export default {
    methods:{
        add(){
            /*
              组件要调用模块中的vuex的mutatios的方法的语法:this.$store.commit(类型,载荷)
              类型:模块名/mutations的方法名
            */
           this.$store.commit("counterKey/incrementSync",4)
        },
        addAsync(){
            /**
             * 组件中要调用vuex模块下的actions的方法:this.$store.dispatch(类型,载荷)
             * 类型:模块名/actions的方法名
             */
            this.$store.dispatch('counterKey/incrementAsync',6)
        }
    }
}
</script>

<style>

</style>